<!--
> Muaz Khan     - github.com/muaz-khan 
> MIT License   - www.webrtc-experiment.com/licence
> Documentation - www.RTCMultiConnection.org
-->

<h1><a href="http://www.RTCMultiConnection.org/docs/">RTCMultiConnection</a> & Session Management</h1>

<script src="//cdn.webrtc-experiment.com/RTCMultiConnection.js">
</script>
<script src="//cdn.webrtc-experiment.com/firebase.js">
</script>

<button id="share-audio-video" class="button">Audio+Video</button>
<button id="share-screen" class="button">Screen</button>
<button id="share-audio" class="button">Only Audio</button>

<button id="leave-conference" disabled>connection.leave( )</button>
<button id="close-conference" disabled>connection.close( )</button>

<div id="videos-container"></div>

<script>
document.getElementById('share-audio-video').onclick = function() {
    connection.session = {
        audio: true,
        video: true
    };
    connection.open();

    disableAllButtons();
};

document.getElementById('share-audio').onclick = function() {
    connection.session = {
        audio: true
    };
    connection.open();

    disableAllButtons();
};

document.getElementById('share-screen').onclick = function() {
    connection.session = {
        screen: true,
        oneway: true
    };
    connection.open();

    disableAllButtons();
};

document.getElementById('close-conference').onclick = function() {
    connection.close();

    enableAllButtons();
    disableCloseButtons();
};

document.getElementById('leave-conference').onclick = function() {
    connection.leave();

    enableAllButtons();
    disableCloseButtons();
};

var videosContainer = document.getElementById('videos-container');
var roomsList = document.getElementById('rooms-list');

var connection = new RTCMultiConnection();
connection.onstream = function(e) {
    videosContainer.insertBefore(e.mediaElement, videosContainer.firstChild);

    enableCloseButtons();
};
connection.onleave = function() {
    disableCloseButtons();
};
connection.connect();

function disableAllButtons() {
    var buttons = document.querySelectorAll('.button');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].disabled = true;
    }
}

function enableAllButtons() {
    var buttons = document.querySelectorAll('.button');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].disabled = false;
    }
}

function enableCloseButtons() {
    document.getElementById('close-conference').disabled = false;
    document.getElementById('leave-conference').disabled = false;
}

function disableCloseButtons() {
    document.getElementById('close-conference').disabled = true;
    document.getElementById('leave-conference').disabled = true;
}
</script>
<style>
button,
input[type=button] {
    -moz-border-radius: 3px;
    -moz-transition: none;
    -webkit-transition: none;
    background: #0370ea;
    background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
    background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
    border: 1px solid #076bd2;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-family: inherit;
    font-size: .8em;
    font-size: 1.5em;
    line-height: 1.3;
    padding: 5px 12px;
    text-align: center;
    text-shadow: 1px 1px 1px #076bd2;
}

button:hover,
input[type=button]:hover {
    background: rgb(9, 147, 240);
}

button:active,
input[type=button]:active {
    background: rgb(10, 118, 190);
}

button[disabled],
input[type=button][disabled] {
    background: none;
    border: 1px solid rgb(187, 181, 181);
    color: gray;
    text-shadow: none;
}
</style>
<hr />
<ol style="font-size: 2em;">
    <li>"leave" means [keep session active] even if session initiator leaves.</li>
    <li>"close" means close entire session if session initiator leaves.</li>
</ol>